<template>
    <view class="content">
        <image src="../../static/image/rank_bg.jpg" class="rank-bg"></image>
        
        <u-navbar :is-back="true" back-icon-color="#fff" title="答题人列表" :background="background" :border-bottom="false" title-color="#fff" title-size="30"></u-navbar>
        
        <view class="floor">
            <image src="../../static/icon/staff_01.png" class="staff-01"></image>
            <view>当前楼盘：{{name}}</view>
        </view>
        <view style="text-align: center;padding: 50upx 0;color: #000;font-size: 24rpx;" v-if="list.length == 0">暂无相关信息</view>
        
        <image src="../../static/image/rank_04.png" class="rank-04" v-if="list && list[0]"></image>
        <view class="top" v-if="list && list[0]">
            <!-- 第二名 -->
            <view class="top-l" v-if="list && list[1]">
                <view class="img-box">
                    <image :src="list[1].image" class="img-2"></image>
                    <image src="../../static/image/rank_02.png" class="rank-02"></image>
                </view>
                <view class="top-name">{{ list[1].user_name }}</view>
                <view class="top-sub">{{ list[1].phone }}</view>
                <view class="top-sub">{{ list[1].time }}</view>
                <view class="top-score"><text class="top-score-num">{{ list[1].score }}</text>分</view>
                <view class="top-time">{{ list[1].start_time }}</view>
            </view>
            <!-- 第一名 -->
            <view class="top-l top-cen" v-if="list && list[0]">
                <view class="img-box">
                    <image :src="list[0].image" class="img-1"></image>
                    <image src="../../static/image/rank_01.png" class="rank-02"></image>
                </view>
                <view class="top-name">{{ list[0].user_name }}</view>
                <view class="top-sub">{{ list[0].phone }}</view>
                <view class="top-sub">{{ list[0].time }}</view>
                <view class="top-score"><text class="top-score-num">{{ list[0].score }}</text>分</view>
                <view class="top-time">{{ list[0].start_time }}</view>
            </view>
            <!-- 第三名 -->
            <view class="top-l top-r" v-if="list && list[2]">
                <view class="img-box">
                    <image :src="list[2].image" class="img-3"></image>
                    <image src="../../static/image/rank_03.png" class="rank-02"></image>
                </view>
                <view class="top-name">{{ list[2].user_name }}</view>
                <view class="top-sub">{{ list[2].phone }}</view>
                <view class="top-sub">{{ list[2].time }}</view>
                <view class="top-score"><text class="top-score-num">{{ list[2].score }}</text>分</view>
                <view class="top-time">{{ list[2].start_time }}</view>
            </view>
        </view>
        
        <view class="down" v-if="list && list.length > 3">
            <view class="item" v-for="(item,index) in list" :key='index' v-if="index > 2 && (index < 10 || moreShow)">
                <view class="num">{{item.top}}</view>
                <image :src="item.image" class="item-img"></image>
                <view class="u-flex-1">
                    <view class="u-flex">
                        <view class="name">{{item.user_name}}</view>
                        <view class="u-p-l-10 u-font-22">{{item.time}}</view>
                    </view>
                    <view class="u-p-t-5 u-font-22">{{item.phone}}</view>
                </view>
                <view class="u-font-22">
                    <text class="score">{{item.score}}</text>分
                </view>
            </view>
            
            <view class="u-p-t-15 u-p-b-15">
                <view class="u-flex u-row-center class5" v-if="!moreShow && list && list.length > 10" @click="moreShow = true">
                    <u-icon name="arrow-down" color="#6d6d6d" size="28" label="查看全部" label-pos="left" label-color="#000"></u-icon>
                </view>
                <view class="u-flex u-row-center class5" v-if="moreShow && list && list.length > 10" @click="moreShow = false">
                    <u-icon name="arrow-up" color="#6d6d6d" size="28" label="收起" label-pos="left" label-color="#000"></u-icon>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                list: [], 
                name: '',
                id: '',
                moreShow: false, //查看更多
            }
        },
        onLoad(option) {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            this.id = option.id;
        	this.getList()
        },
        methods: {
            // 获取列表
            getList() {
            	this.$ajax('answer_ranking', {
            		user_token: this.$getSync('userToken'),
            		id: this.id,//活动试卷id
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.name = ret.detail.name
            			this.list = ret.detail.ranking
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(49,153,245,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(49,153,245,' + a + ')';
            	}
            },
        },
    }
</script>

<style lang="scss">
    .class5 {
    	width: 205rpx;
    	height: 65rpx;
    	border: 1rpx solid #e4e7ed;
    	border-radius: 30rpx;
    	margin: auto;
    }
    page {
        background: #72b5fa;
    }
    .content{
        padding: 20rpx;
    }
    .floor{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-color: #fff;
        padding: 25rpx;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .staff-01{
        width: 32rpx;
        height: 34rpx;
        margin-right: 15rpx;
    }
    .rank-bg{
        width: 750rpx;
        height: 870rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .rank-04{
        width: 710rpx;
        height: 64rpx;
    }
    .top{
        background-color: #fff;
        border-radius: 0 0 20rpx 20rpx;
        margin-bottom: 20rpx;
        padding: 0 20rpx 35rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .top-l{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: calc(630rpx / 3);
        // height: 190rpx;
        border-radius: 20rpx;
        background: linear-gradient(to top, #fff, #fcfcff, #f3f3ff);
        position: relative;
        margin-top: 100rpx;
    }
    .top-cen{
        background: linear-gradient(to top, #fff, #fef3e7, #feead4);
        // height: 260rpx;
        margin-top: 10rpx;
    }
    .top-r{
        background: linear-gradient(to top, #fff, #fef4f0, #fde5da);
        margin-top: 160rpx;
    }
    .img-box{
        position: relative;
        margin-top: -45rpx;
    }
    .img-2{
        width: 108rpx;
        height: 108rpx;
        border-radius: 50%;
        box-sizing: border-box;
        border: 2rpx solid #c5c5ff;
    }
    .img-1{
        width: 128rpx;
        height: 128rpx;
        border-radius: 50%;
        box-sizing: border-box;
        border: 2rpx solid #ff9724;
    }
    .img-3{
        width: 98rpx;
        height: 98rpx;
        border-radius: 50%;
        box-sizing: border-box;
        border: 2rpx solid #f2a887;
    }
    .rank-02{
        width: 51rpx;
        height: 45rpx;
        position: absolute;
        bottom: -10rpx;
        right: -15rpx;
    }
    .top-name{
        width: 200rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 34rpx;
        // font-weight: bold;
        text-align: center;
        padding-top: 15rpx;
        padding-bottom: 5rpx;
    }
    .top-sub{
        font-size: 22rpx;
        padding-bottom: 8rpx;
    }
    .top-score{
        padding: 5rpx 35rpx;
        background-color: #fd9690;
        border-radius: 50rpx;
        color: #fff;
        font-size: 26rpx;
    }
    .top-score-num{
        font-size: 36rpx;
    }
    .top-time{
        font-size: 22rpx;
        color: #909090;
        padding-top: 8rpx;
    }
    
    
    
    .down{
        background-color: #fff;
        border-radius: 20rpx;
        padding: 0 20rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #e6e6e6;
        padding: 35rpx 0;
    }
    .item:last-child{
        border-bottom: none;
    }
    .num{
        width: 50rpx;
        height: 50rpx;
        font-size: 30rpx;
        line-height: 50rpx;
        color: #fff;
        text-align: center;
        background-color: #b6c2d8;
        border-radius: 50%;
    }
    .item-img{
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        margin: 0 20rpx 0 30rpx;
    }
    .name{
        max-width: 44vw;
        font-size: 34rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .score{
        font-size: 46rpx;
        color: #f62a2a;
    }
    
</style>

